<template>
  <div class="main">
    <page-header></page-header>
    <back></back>
    <div class="content px-2">
      <div class="top-tip flex align-center justify-start">
        <div class="colorfff font24">{{ type }}</div>
        <search-company @companyName="companyName" class="ml-17"></search-company>
      </div>
      <div class="bottom-tip mt-1 p-2">
        <el-table
          :data="dataList"
          class="customer-table"
          :max-height="getRealPX(780)"
          size="small"
          style="width: 100%; background: transparent; text-align: center"
          :header-cell-style="{
            background: 'rgba(0, 86, 251, .2)',
            fontSize: getRealPX(12) + 'px',
          }"
        >
          <el-table-column label="序号" align="center" type="index" width="50">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + (pageIndex - 1) * pageSize + 1 }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="vcCompanyName"
            label="企业名称"
            align="center"
            width="280"
          >
          </el-table-column>
          <el-table-column label="转出厂商" prop="vcZcFactory" align="center" />

          <el-table-column label="转入厂商" prop="vcZrFactory" align="center" />
          <el-table-column label="品种" prop="vcHwName" align="center" width="80" />

          <el-table-column label="运输量" prop="intNumber" align="center" />
          <el-table-column
            prop="vcZzNumber"
            label="中转单号"
            align="center"
          >
          </el-table-column>
          <el-table-column label="日期" prop="dtAddDate" align="center" />
        </el-table>
        <div class="pagination">
          <el-pagination
            :current-page="pageIndex"
            :page-size="pageSize"
            prev-text="上一页"
            next-text="下一页"
            layout="total, prev, pager, next, jumper"
            style="display: inline-block"
            background
            @current-change="handlePageChange"
            :total="total"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "@/components/header.vue";
import back from "@/components/back.vue";
import ElTab from "@/components/el_table";

import billApi from "@/api/bill/index";

import SearchCompany from '@/components/searchCompany.vue';
export default {
  name: "pageBiling",
  components: { pageHeader, back, ElTab, SearchCompany },
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      // 总条数
      total: 0,
      // 每页条数
      pageSize: 18,
      seachParams: {
        vcCompanyName: ''
      },
      type: ''
    };
  },
  methods: {
    companyName(e){
      console.log('1111',e)
      this.seachParams.vcCompanyName = e
      this.dataOne()
    },
    dataOne() {
      let that = this;
      that.seachParams.pageIndex = that.pageIndex
      that.seachParams.pageSize = that.pageSize
      // if (this.type == '今日开票量') {
      //   that.seachParams.dtAddDate = ''
      // } else {
      //   that.seachParams.dtAddDate = ''
      // }
      billApi
        .dataTransferList(this.seachParams)
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            let data = res.records
            that.dataList = data;
            that.total = res.total;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handlePageChange(val) {
      this.pageIndex = val
      this.dataOne()
    },
  },
  mounted() {
    this.dataOne();
    this.type = this.$route.query.title
  },
};
</script>
<style lang="stylus" scoped>
/deep/.el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 16px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/deep/.el-table tr, .el-table td {
  color: #e5dada;
  font-size: 12px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/, /deep/.el-table tr.data-row {
  background: rgba(0, 204, 255, 0.2);
}

/deep/.el-table tr.dataone-row {
  // background: block;
}

/deep/.el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
  color: rgba(0, 204, 255, 1);
  font-size: 12px;
  font-weight: 400;
}

// 去掉表格单元格边框
/deep/.customer-table th {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

/deep/.customer-table td, .customer-table th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-top: 0;
}

// 表格最外边框
/deep/.el-table--border, .el-table--group {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

// 头部边框
/deep/.customer-table thead tr th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-right: none;
}

/deep/.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid rgba(0, 86, 251, 0.2);
}

// 表格最外层边框-底部边框
/deep/.el-table--border::after, .el-table--group::after {
  width: 0;
}

/deep/.customer-table::before {
  width: 0;
}

/deep/.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
  width: 0;
}

// 表格有滚动时表格头边框
/deep/.el-table--border th.gutter:last-of-type {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-left: none;
}

.top-tip {
  width: 100%;
  height: 74px;
  background: url('../../assets/img/billing/top.png') no-repeat;
  background-size: 100% 74px;
  overflow: hidden;

  .colorfff {
    margin-left: 84px;
  }
}

.bottom-tip {
  width: 100%;
  height: 870px;
  background: url('../../assets/img/billing/bottom.png') no-repeat;
  background-size: 100% 870px;
}
</style>
